<template>
  <div class="app-container">
    <div class="flex flex-col mb-4">
      <div class="flex justify-between">
        <p class="text-xl mb-2">筛选查询</p>
        <div>
          <el-button
            class="marginRB10"
            icon="el-icon-search"
            type="primary"
            @click="getList"
          >搜索
          </el-button>
          <el-button class="marginRB10" @click="resetSubmit">重置</el-button>
        </div>
      </div>
      <div class="flex flex-wrap">
            <div>
                <span class="w-28 inline-block text-right">送礼用户ID：</span>
                <el-input
                    v-model="listQuery.contributor_user_code"
                    class="marginRB10"
                    clearable
                    placeholder="请输入送礼用户ID"
                    style="width: 200px"
                ></el-input>
            </div>
            <div>
                <span class="w-28 inline-block text-right">收礼用户ID：</span>
                <el-input
                    v-model="listQuery.user_code"
                    class="marginRB10"
                    clearable
                    placeholder="请输入收礼用户ID"
                    style="width: 200px"
                ></el-input>
            </div>
            <div>
                <span class="w-28 inline-block text-right">用户名称：</span>
                <el-input
                    v-model="listQuery.user_name"
                    class="marginRB10"
                    clearable
                    placeholder="请输入用户名称"
                    style="width: 200px"
                ></el-input>
            </div>
            <div>
                <span class="w-28 inline-block text-right">对决房间：</span>
                <el-select v-model.number="listQuery.room_id"
                            class="filter-item marginRB10"
                            filterable
                            placeholder="请选择对决房间"
                            style="width: 200px"
                >
                    <el-option
                    v-for="item in selectList"
                    :key="item.key"
                    :label="item.lab"
                    :value="item.key"
                    ></el-option>
                </el-select>
            </div>
            <div>
                <span class="w-28 inline-block text-right">礼物名称：</span>
                <el-input
                    v-model="listQuery.gift_name"
                    class="marginRB10"
                    clearable
                    placeholder="请输入礼物名称"
                    style="width: 200px"
                ></el-input>
            </div>
            <div>
                <span class="w-28 inline-block text-right">礼物类型：</span>
                <el-select v-model.number="listQuery.gift_category"
                            class="filter-item marginRB10"
                            filterable
                            placeholder="请选择礼物类型"
                            style="width: 200px"
                >
                    <el-option
                    v-for="item in categoryOption"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                    ></el-option>
                </el-select>
            </div>
            <div>
                <span class="w-28 inline-block text-right">送礼时间：</span>
                <el-date-picker
                    v-model="times"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </div>
        
      </div>
    </div>

    <p class="text-xl mb-4">明细列表</p>
    <el-table
      ref="dataList"
      :data="menuList"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      border
      row-key="id"
      style="margin-bottom: 20px"
      @sort-change="sortChange"
    >
        <el-table-column :index="indexMethod" type="index" width="150" label="序号" sortable></el-table-column>
        <el-table-column label="对决房间" prop="room_name"></el-table-column>
        <el-table-column label="送礼用户ID" prop="contributor_user_code"></el-table-column>
        <el-table-column label="送礼用户昵称" prop="contributor_user_name"></el-table-column>
        <el-table-column label="收礼用户ID" prop="user_code"></el-table-column>
        <el-table-column label="收礼用户昵称" prop="user_name"></el-table-column>
        <el-table-column label="礼物名称" prop="name"></el-table-column>
        <el-table-column label="礼物数量" prop="number"></el-table-column>
        <el-table-column label="礼物价值" prop="coin" width="150" sortable></el-table-column>
        <el-table-column label="礼物魅力值" prop="cardiac" sortable></el-table-column>
        <el-table-column label="礼物PK值" prop="score" sortable></el-table-column>
        <el-table-column label="礼物类型" prop="gift_category_name"></el-table-column>
        <el-table-column label="送礼时间" prop="created_at_format" sortable></el-table-column>
    </el-table>
    <!-- 分页 -->
    <cus-pagination
        v-show="total > 0"
        :limit.sync="listQuery.perPage"
        :page.sync="listQuery.page"
        :total="total"
        @pagination="getList"
    />

    
  </div>
</template>

<script>
import { logList, getCateData } from '@/api/pk/room'

export default {
	data() {
		return {
			times: '',
			listLoading: true,
			total: 0,
			listQuery: {
				page: 1,
				perPage: 10
			},
			selectList: [
				{ key: undefined, lab: '全部房间' },
				{ key: 1, lab: '红方房间 ' },
				{ key: 2, lab: '蓝方房间' }
			],
			menuList: [],
      categoryOption: [{ id: 0, title: '所有分类' }],
		}
	},
	created() {
    this.listQuery.id = this.$route.query.row
		this.getList()
    this.handleGetCateData()
	},
	methods: {
		indexMethod(index) {
			return (this.listQuery.page - 1) * this.listQuery.perPage + index + 1
		},
		getList() {
			this.listLoading = true
      if (this.times && this.times.length > 0) {
				this.listQuery.start = this.times[0]
				this.listQuery.end = this.times[1]
			}else {
				this.listQuery.start = undefined
				this.listQuery.end = undefined
			}
			for (let key in this.listQuery) {
				this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
			}
			logList(this.listQuery).then(({ data }) => {
				this.menuList = data.data
				this.total = data.total
				this.listLoading = false
			})
		},
		resetSubmit() {
			this.listQuery = {
				page: 1,
				perPage: 10,
        id: this.$route.query.row
			}
      this.times = ''
			this.getList()
		},
    handleGetCateData() {
      getCateData().then(res => {
        this.categoryOption = [...this.categoryOption, ...res.data]
        this.addCategoryOption = res.data
      })
    },
    sortChange(column, prop, order) {
      console.log(column, prop, order)
    }
	}
}
</script>
